// 顶部动画
(function() {
    if ($(this.document).scrollTop() >= 10) return
    $('header').show()
})()
$(window).scroll(function() {
    $myscroll = $(this.document).scrollTop()
    if ($myscroll > 10) {
        $('header').attr('class', 'header-hide')
    } else {
        $('header').attr('class', 'header-show')
    }
})

setInterval(() => {
    document.querySelector('.nowdate').innerText = moment().format('YYYY MM DD')
    document.querySelector('.nowtime').innerText = moment().format('hh : mm : ss')
}, 100);

// bar1
+(function() {
    var option = {
        // 图表提示框
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                color: '#fff'
            }
        },
        color: ['skyblue'],
        // 图例
        legend: {
            data: ['销量'],
            left: 15,
            textStyle:{//图例文字的样式
                color:'#ccc'
            }
        },
        // 网格配置 containLabel表示是否包含坐标轴
        grid: {
            left: 0,
            right: 20,
            top: 40,
            bottom: 10,
            containLabel: true
        },
        // 工具栏 是否保存图片
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // x轴配置
        xAxis: {
            type: 'category', // 类目
            boundaryGap: true, // 是否保留左右缝隙
            data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
            // 坐标轴标签
            axisLabel: {
                color: '#fff',
                fontSize: '6px',
                interval: 0,
                // rotate: -40,
                // formatter: (value) => {
                //     return value.split('').join('\n')
                // }
            },
            // 坐标轴线
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff',
                fontSize: '6px'
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            // 单个的配置
            {
                name: '销量',
                type: 'bar',
                barWidth: "40%",
                data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ],
                        global: false
                    },
                    // barBorderRadius: 5
                    // borderColor: '#fff',
                    // borderWidth: 1,
                    // borderType: 'solid'
                }
            }
        ]
    }
    echarts.init(document.querySelector('.bar1')).setOption(option)
    
    // 图表自适应
    window.addEventListener('resize', function() {
        echarts.init(document.querySelector('.bar1')).resize()
    })
})()

// bar2
+(function() {
    var colorlist = ["#333333", "#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
    option = {
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        grid: {
            left: 20,
            right: 20,
            top: 10,
            bottom: 10,
            containLabel: true
        },
        xAxis: {
            show: false // 隐藏x轴
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                data: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6'],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            {
                type: 'category',
                inverse: true,
                data: [557, 702, 350, 610, 793, 664],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff'
                }
            }
        ],
        series: [
            {
                name: '',
                type: 'bar',
                data: [40, 70, 34, 60, 78, 69],
                barWidth: '45%',
                // barCategoryGap: '50%',
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}',
                    fontSize: 10
                },
                itemStyle: {
                    barBorderRadius: 20,
                    color: function(params) {
                        console.log(params.dataIndex)
                        return colorlist[params.dataIndex]
                    }
                },
                yAxisIndex: 0
            },
            {
                name: '',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 100],
                barWidth: '45%',
                label: {
                    show: true,
                    position: 'left',
                    formatter: '{c}'
                },
                itemStyle: {
                    color: 'none',
                    borderColor: 'lightblue',
                    borderWidth: 2,
                    borderType: 'solid',
                    barBorderRadius: 20
                },
                yAxisIndex: 1
            }
        ]
        /**
         * 解析 两组数据，大的包裹小的数据
         * 1:
         *  修改label显示，位置为里面，显示数值为data;
         *  修改颜色，返回数组中对应index值的颜色
         * 2:
         *  添加 yAxisIndex节点，表示嵌套关系
         * 3:
         *  新增一组y轴对象，为右边的坐标轴
         */
    }
    echarts.init(document.querySelector('.bar2')).setOption(option)
})()